<template>
  <div>
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb> -->

    <!--      添加化合物按钮区域-->
    <el-card style="margin-top: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <div class="manager-all">
          <div class="project-manager"></div>
          <div class="project-item">
            <el-breadcrumb-item :to="{ path: '/' }"
              >项目列表
            </el-breadcrumb-item>
          </div>
        </div>
        <!-- <el-breadcrumb-item>菜单管理</el-breadcrumb-item> -->
        <hr
          style="width: 1642px;
                 height: 1px;
                 border:none;
                 background: #E8ECF0;
                 margin-left:-23px;"
        />
      </el-breadcrumb>
      <div style="margin-top:20px;display:flex;justify-content:space-between;">
        <div>
          <el-button type="primary" @click="addFormVisible = true" class="add"
            ><img src="../../icon标/添加数据.png" class="addimg" alt="" />
            添加数据
          </el-button>
          <el-button
            style="width:157px !important;"
            type="primary"
            class="add"
            @click="downloadAllCompound()"
            >图片内嵌Excel下载
          </el-button>
          <el-button
            type="primary"
            class="add"
            @click="downloadAllCompoundAndPic()"
          >
            打包全部下载
          </el-button>
        </div>

        <div>
          <el-input
            v-model="query"
            clearable
            placeholder="搜索想要查找的内容"
            @clear="getMcList"
            class="input"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getMcList"
            ></el-button>
          </el-input>
          <el-button
            @click="searchMCid"
            class="add"
            type="primary"
            style="width:120px !important;height:36px !important;margin-left:10px;"
          >
            高级搜索
            <img
              src="../../icon标/定位.png"
              alt=""
              style="margin-left:8px;margin-top:-5px;"
            />
          </el-button>
          <el-button
            class="add"
            type="primary"
            style="width:36px !important;height:36px !important;"
            @click="resetMCid()"
          >
            <img
              src="../../icon标/刷新.png"
              alt=""
              style="margin-left:-8px;margin-top:-5px;"
            />
          </el-button>
        </div>
      </div>

      <div class="MCsearch" v-if="search == true">
        <el-row style="display:flex;align-items:center;">
          请输入要下载的化合物范围 :
          <el-form style="display:flex;margin-top:25px;margin-left:10px;">
            <el-form-item label="">
              <el-input
                @input="inputChange"
                v-model="selectMin"
                placeholder="请输入化合物ID"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="—" style="margin-left:10px;"></el-form-item>
            <el-form-item label="">
              <el-input
                @input="inputChange"
                v-model="selectMax"
                placeholder="请输入化合物ID"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </el-row>

        <div class="MCbutton">
          <el-button
            style="width:157px !important;"
            type="primary"
            plain
            class="add"
            @click="downloadCompound()"
            >图片内嵌Excel下载
          </el-button>
          <el-button
            type="primary"
            plain
            class="add"
            @click="downloadCompoundAndPic()"
          >
            打包全部下载
          </el-button>
        </div>
      </div>

      <!--      角色列表区域-->
      <el-table
        :data="mcList"
        border
        stripe
        style="width:100%"
        class="mcTable"
        :header-cell-style="{ background: '#F6F7FB' }"
        @select="handleSelectionChange"
        @select-all="handleSelectionChange"
        :row-key="getRowMCKeys"
      >
        <!-- 展开列 -->
        <!-- <el-table-column type="expand">
          <template slot-scope="props">

            <el-form label-position="left" inline class="demo-table-expand">
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="化合物结构" class="table-item">
                    <el-image
                      class="table-image"
                      :src="
                        this.now_url.now_url+`pictures/${props.row.structureUrl}`
                      "
                    >
                      <div slot="error" class="image-slot">
                        <span class="table-item-span"
                          >图片加载失败或不存在</span
                        >
                      </div>
                    </el-image>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="化合物结构smiles" class="table-item">
                    <span class="table-item-span">{{
                      props.row.structureSmiles
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="化合物编号" class="table-item">
                    <span class="table-item-span">{{ props.row.sid }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="存储样品瓶1条形码" class="table-item">

                    <barcode
                      :value="props.row.barCode1"
                      :options="barcode_option"
                      >条形码加载失败</barcode
                    >
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row class="expand-msg">
                <el-col class="expand-msg-left">
                  <el-form-item label="存储样品瓶1质量" class="table-item">
                    <span class="table-item-span">{{
                      props.row.quality1
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="存储样品瓶2条形码" class="table-item">
                    <barcode
                      :value="props.row.barCode2"
                      :options="barcode_option"
                      >条形码加载失败</barcode
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col class="expand-msg-left">
                  <el-form-item label="存储样品瓶2质量" class="table-item">
                    <span class="table-item-span">{{
                      props.row.quality2
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="批次" class="table-item">
                    <span class="table-item-span">{{ props.row.batch }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="合成人员" class="table-item">
                    <span class="table-item-span">{{ props.row.creator }}</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="实验记录本编号" class="table-item">
                    <span class="table-item-span">{{
                      props.row.recordNumber
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="纯度" class="table-item">
                    <span class="table-item-span">{{ props.row.purity }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="形状（颜色）" class="table-item">
                    <span class="table-item-span">{{ props.row.ch }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="形式" class="table-item">
                    <span class="table-item-span">{{
                      props.row.freeBaseOrSalt
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item
                    label="核磁谱图、质谱等表征数据"
                    class="table-item"
                  >
                    <el-button
                      class="add-button"
                      type="primary"
                      @click="uploadRar(props.row.characterizationUrl)"
                      plain
                      >下载
                    </el-button>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col :span="8">
                  <el-form-item label="分子量" class="table-item">
                    <span class="table-item-span">{{ props.row.mw }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="expand-msg-left">
                  <el-form-item label="研发项目编号" class="table-item">
                    <span class="table-item-span">{{
                      props.row.projectId
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="expand-msg-left">
                  <el-form-item label="存储位置" class="table-item">
                    <span class="table-item-span">{{
                      props.row.position
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="信息录入日期" class="table-item">
                    <span class="table-item-span">{{
                      props.row.inputDate | timestampToTime
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="信息录入人员" class="table-item">
                    <span class="table-item-span">{{
                      props.row.keyboarder
                    }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column> -->
        <!-- 索引列 -->
        <!--        <el-table-column type="index" label="#"></el-table-column>-->
        <el-table-column
          type="selection"
          width="55"
          prop="isCheck"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column label="化合物编号" prop="sid"></el-table-column>
        <el-table-column
          label="化合物结构smiles"
          prop="structureSmiles"
        ></el-table-column>
        <el-table-column label="录入人员" prop="keyboarder"></el-table-column>
        <el-table-column
          label="信息录入日期"
          prop="inputDate"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.sid)"
              >编辑
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeMcBySid(scope.row.sid)"
              >删除
            </el-button> -->
            <div class="btn-all">
              <div class="bj" v-if="scope.row.perm === 0">
                <img src="../../icon标/编辑.png" alt="" />
                <el-link
                  type="primary"
                  :underline="false"
                  @click="showEditDialog(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;margin-top:-5px;"
                  >编辑
                </el-link>
              </div>
              <div class="sx" v-if="scope.row.perm === 0"></div>
              <div class="xq">
                <img src="../../icon标/查看 (1).png" alt="" />
                <router-link
                  type="success"
                  :underline="false"
                  @click="removeMcBySid(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;"
                  :to="{path:'/synthesisDetail/'+scope.row.sid,query:{page:queryInfo.page,size:queryInfo.size}}"
                  >详情
                </router-link>
              </div>
              <div class="sx"></div>
              <div class="sc">
                <img src="../../icon标/删除.png" alt="" />
                <el-link
                  type="danger"
                  :underline="false"
                  @click="removeMcBySid(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;margin-top:-5px;"
                  >删除
                </el-link>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页区域-->
      <el-pagination
        background
        :current-page="queryInfo.page"
        :page-size="queryInfo.size"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!--添加化合物的弹出框-->
      <!--    prop.sync表示这个子组件会修改父组件的值，v-model表示这是个表单类型的组件。-->
      <!--      ※ 放大缩小容易乱样式 先把width写死了-->
      <el-dialog
        :visible.sync="addFormVisible"
        title="分子合成"
        width="1300px"
        @close="addMcClosed"
      >
        <hr
          style=" margin-top:-30px;border:none;background:#4087fc;height:1.5px;"
        />
        <hr
          style="margin-top:-9px;border:none;height:3px;width:100px;background:#4087fc;margin-left:0px;"
        />
        <!--            :rules先不写了-->
        <el-form
          :model="addForm"
          ref="addMcRef"
          label-width="140px"
          class="molecular-Compose"
        >
          <el-row :gutter="0" style="margin-top:30px;">
            <el-row>
              <el-col :span="8">
                <el-form-item label="化合物结构smiles :" prop="structureSmiles">
                  <el-input v-model="addForm.structureSmiles"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实验记录本编号 :" prop="recordNumber">
                  <el-input v-model="addForm.recordNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="研发项目编号 :" prop="projectId">
                  <el-input v-model="addForm.projectId"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="存储样品瓶1条形码 :" prop="barCode1">
                  <el-input
                    v-model="addForm.barCode1"
                    placeholder="若未输入条形码 将自动生成"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储样品瓶1质量 :" prop="quality1">
                  <el-input v-model="addForm.quality1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批次（日期）:" prop="batch">
                  <el-input v-model="addForm.batch"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="存储样品瓶2条形码 :" prop="barCode2">
                  <el-input
                    v-model="addForm.barCode2"
                    placeholder="若未输入条形码 将自动生成"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储样品瓶2质量 :" prop="quality2">
                  <el-input v-model="addForm.quality2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="信息录入日期 :" prop="inputDate">
                  <el-date-picker
                    v-model="addForm.inputDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="分子量 :" prop="mw">
                  <el-input v-model="addForm.mw"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性状（颜色）:" prop="ch">
                  <el-input v-model="addForm.ch"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纯度 :" prop="purity">
                  <el-input v-model="addForm.purity"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="形式 :" prop="freeBaseOrSalt">
                  <el-input v-model="addForm.freeBaseOrSalt"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合成人员 :" prop="creator">
                  <el-input v-model="addForm.creator"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储位置 :" prop="position">
                  <el-input v-model="addForm.position"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="化合物结构 :" prop="structureUrl">
                  <el-upload
                    v-model="addForm.structureUrl"
                    class="upload-demo"
                    ref="cs"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handleCsRemove"
                    :on-success="csHandleSuccess"
                    :on-error="csHandleError"
                    :file-list="csFile"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <i class="el-icon-upload"></i> -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt="" />
                    </div>
                    <!-- <el-button slot="trigger" size="small" type="primary"
                      >选取文件</el-button
                    > -->
                    <div class="el-upload__text">上传jpg/png文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="核磁谱图、质谱等表征数据 :"
                  prop="moduleUrl"
                >
                  <el-upload
                    v-model="addForm.moduleUrl"
                    class="upload-demo"
                    ref="cr"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadFile`"
                    :on-preview="handlePreview"
                    :on-remove="handleCrRemove"
                    :on-success="crHandleSuccess"
                    :on-error="crHandleError"
                    :file-list="crFile"
                    :before-upload="beforeRarUpload"
                    drag
                    :headers="headerObj"
                  >
                    <div style="margin-top:35px;">
                      <img src="../../icon标/压缩文件.png" alt="" />
                    </div>
                    <div class="el-upload__text">上传 rar/zip/7z 文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="18">
              <el-col :span="3.5">
                <span style="padding-left:60px;color:#333333">运算方式 :</span>
              </el-col>
              <el-col :span="16">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="ADMET"></el-checkbox>
                  <el-checkbox label="KINOME"></el-checkbox>
                  <el-checkbox label="Generative"></el-checkbox>
                  <el-checkbox label="CoCrystal"></el-checkbox>
                  <el-checkbox label="ScaffHop"></el-checkbox>
                  <el-checkbox label="iDEL"></el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <!--      底部区域-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="addMc"
            style="margin-left:50px;margin-bottom:15px;"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!--修改用户的对话框-->
      <el-dialog
        title="修改化合物"
        :visible.sync="editMcVisible"
        width="1300px"
        @close="editFormClosed"
      >
        <hr
          style=" margin-top:-30px;border:none;background:#4087fc;height:1.5px;"
        />
        <hr
          style="margin-top:-9px;border:none;height:3px;width:100px;background:#4087fc;margin-left:0px;"
        />
        <el-form
          :model="editForm"
          :rules="editMcRules"
          ref="editMcRef"
          label-width="140px"
        >
          <!--          让其重新上传？ 还要给他下载的位置？-->
          <el-row :gutter="0">
            <el-row style="margin-top:30px;">
              <el-col :span="8">
                <el-form-item label="化合物编号 :" prop="sid">
                  <el-input v-model="editForm.sid" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="化合物结构smiles :" prop="structureSmiles">
                  <el-input v-model="editForm.structureSmiles"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实验记录本编号 : " prop="recordNumber">
                  <el-input v-model="editForm.recordNumber"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="研发项目编号 :" prop="projectId">
                  <el-input v-model="editForm.projectId"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储样品瓶1条形码 :" prop="barCode1">
                  <el-input
                    v-model="editForm.barCode1"
                    placeholder="若未输入条形码 将自动生成"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="存储样品瓶1质量 :" prop="quality1">
                  <el-input v-model="editForm.quality1"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="批次（日期）:" prop="batch">
                  <el-input v-model="editForm.batch"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储样品瓶2条形码 :" prop="barCode2">
                  <el-input
                    v-model="editForm.barCode2"
                    placeholder="若未输入条形码 将自动生成"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储样品瓶2质量 :" prop="quality2">
                  <el-input v-model="editForm.quality2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="信息录入日期 :" prop="inputDate">
                  <el-date-picker
                    v-model="editForm.inputDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分子量 :" prop="mw">
                  <el-input v-model="editForm.mw"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性状（颜色）:" prop="ch">
                  <el-input v-model="editForm.ch"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="纯度 :" prop="purity">
                  <el-input v-model="editForm.purity"></el-input>
                </el-form-item>
              </el-col>
              <!--                <el-col :span="8">-->
              <!--                  <el-form-item label="信息录入人员 :" prop="keyboarder">-->
              <!--                    <el-input v-model="editForm.keyboarder"></el-input>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <el-col :span="8">
                <el-form-item label="形式 :" prop="freeBaseOrSalt">
                  <el-input v-model="editForm.freeBaseOrSalt"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="合成人员 :" prop="creator">
                  <el-input v-model="editForm.creator"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储位置 :" prop="position">
                  <el-input v-model="editForm.position"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="化合物结构 :" prop="structureUrl">
                  <el-upload
                    v-model="editForm.structureUrl"
                    class="upload-demo"
                    ref="cs"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handleCsRemove"
                    :on-success="csHandleSuccess"
                    :on-error="csHandleError"
                    :file-list="csFile"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                      >选取文件</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      只能上传jpg/png文件
                    </div> -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt="" />
                    </div>
                    <div class="el-upload__text">上传jpg/png文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="核磁谱图、质谱等表征数据 :"
                  prop="moduleUrl"
                >
                  <el-upload
                    v-model="editForm.moduleUrl"
                    class="upload-demo"
                    ref="cr"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadFile`"
                    :on-preview="handlePreview"
                    :on-remove="handleCrRemove"
                    :on-success="crHandleSuccess"
                    :on-error="crHandleError"
                    :file-list="crFile"
                    :before-upload="beforeRarUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                      >选取文件</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      只能上传 rar/zip/7z 文件
                    </div> -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/压缩文件.png" alt="" />
                    </div>
                    <div class="el-upload__text">上传 rar/zip/7z 文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="18">
              <el-col :span="3.5">
                <span style="padding-left:60px;color:#333333">运算方式 :</span>
              </el-col>
              <el-col :span="16">
                <el-checkbox-group v-model="MCcheckList">
                  <el-checkbox label="ADMET"></el-checkbox>
                  <el-checkbox label="KINOME"></el-checkbox>
                  <el-checkbox label="Generative"></el-checkbox>
                  <el-checkbox label="CoCrystal"></el-checkbox>
                  <el-checkbox label="ScaffHop"></el-checkbox>
                  <el-checkbox label="iDEL"></el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editMcVisible = false" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="editMc"
            style="margin-left:50px;margin-bottom:15px;"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import VueBarcode from "@xkeshi/vue-barcode";
import { getCookie } from "../../utils/util";

export default {
  //分子设计
  name: "MolecularCompose",
  data() {
    return {
      checkList: ["ADMET", "KINOME"],
      MCcheckList: ["ADMET", "KINOME"],
      selectValue: [0, 0],
      selectMax: "",
      selectMin: "",
      multipleSelection: [],
      multipleSelectionSid: [],
      search: false,
      // 所有角色列表
      mcList: [],
      // 以下是弹出框
      //是否显示弹出框
      addFormVisible: false,
      //要提交的表单信息
      addForm: {
        structureUrl: "",
        structureSmiles: "",
        sid: "",
        barCode1: "",
        quality1: "",
        barCode2: "",
        quality2: "",
        batch: "",
        creator: "",
        recordNumber: "",
        characterizationUrl: "",
        purity: "",
        ch: "",
        freeBaseOrSalt: "",
        mw: "",
        projectId: "",
        position: "",
        inputDate: "",
        type: 2
      },
      //有个name 有个url
      csFile: [],
      crFile: [],
      queryInfo: {
        query: "",
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        size: 5,
        type: 2
      },
      total: 0,
      query: "",
      // 监听 分页的size 改变的事件
      // imageFit:['scale-down'],
      // fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
      // contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
      // cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
      // none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
      // scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

      //编辑相关
      editMcVisible: false,
      // 查询到的用户信息对象
      editForm: {
        structureUrl: "",
        structureSmiles: "",
        sid: "",
        barCode1: "",
        quality1: "",
        barCode2: "",
        quality2: "",
        batch: "",
        creator: "",
        recordNumber: "",
        characterizationUrl: "",
        purity: "",
        ch: "",
        freeBaseOrSalt: "",
        mw: "",
        projectId: "",
        position: "",
        inputDate: "",
        type: 2
      },
      editMcRules: {
        // email: [
        //   {
        //     required: true,
        //     message: '请输入密码',
        //     trigger: 'blur'
        //   },
        //   {
        //     validator: checkEmail,
        //     trigger: 'blur'
        //   }
        // ],
        // mobile: [
        //   {
        //     required: true,
        //     message: '请输入手机号码',
        //     trigger: 'blur'
        //   },
        //   {
        //     validator: checkMobile,
        //     trigger: 'blur'
        //   }
        // ]
      },

      rules: {
        //
        // structureSmiles: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // barCode1: [
        //   { required: true, message: '请选择活动区域', trigger: 'change' }
        // ],
        // productDate: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        // provider: [
        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        // ],
        // inputDate: [
        //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        // ],
        // keyboarder: [
        //   { required: true, message: '请选择活动资源', trigger: 'change' }
        // ],
        // projectName1: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectNumber1: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectPic1: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectName2: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectNumber2: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectPic2: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // sopUrl: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // originalDataUrl: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
      },
      barcode_option: {
        // displayValue: false,
        fontSize: "15px"
        // format:"EAN-8"
        // width:'1000px',
        // height:'100px',
      },
      headerObj: {
        token: getCookie("token")
      },
      url: this.now_url.now_url
    };
  },
  components: {
    barcode: VueBarcode
  },
  created() {
    var query=this.$route.query
    if(query.page!=null){
      this.queryInfo.page=Number(query.page)
    }
    if(query.size!=null){
      this.queryInfo.size=Number(query.size)
    }
    this.getMcList();
  },
  mounted() {
    // console.log(times)
    this.addForm.inputDate = new Date().getTime();
  },
  methods: {
    resetMCid() {
      // return (this.search = false),
      (this.selectValue = [0, 0]), (this.selectMax = ""), (this.selectMin = "");
    },
    inputChange(e) {
      //强制刷新
      this.$forceUpdate();
    },
    searchMCid: function() {
      return (
        (this.search = !this.search),
        (this.selectValue = [0, 0]),
        (this.selectMax = ""),
        (this.selectMin = "")
      );
    },
    async getMcList() {
      if (this.query === "") {
        this.queryInfo.query = -1;
      } else {
        this.queryInfo.query = this.query;
      }
      const { data: res } = await this.$axios.get("get", {
        params: this.queryInfo
      });
      if (res.code !== 200) {
        return this.$message.error("获取信息列表失败！");
      }
      this.mcList = res.data;
      this.total = res.total;
      //接受图片路径并显示
      console.log(this.mcList);
    },
    handleSizeChange(newSize) {
      this.$router.push({path:'/add/molecularCompose',query:{page:this.queryInfo.page,size:this.queryInfo.size}})
      this.queryInfo.size = newSize;
      this.getMcList();
      console.log(`每页 ${newSize} 条`);
    },
    // 监听 分页的page 改变的事件
    handleCurrentChange(newPage) {
      this.$router.push({path:'/add/molecularCompose',query:{page:this.queryInfo.page,size:this.queryInfo.size}})
      this.queryInfo.page = newPage;
      this.getMcList();
      console.log(`当前页: ${newPage}`);
    },
    onSubmit() {
      console.log("submit!");
    },
    //关闭表单的时候 重设内部属性为空
    addMcClosed() {
      this.$refs.addMcRef.resetFields();
      this.$refs.cs.clearFiles();
      this.$refs.cr.clearFiles();
      this.addForm.structureUrl = "";
      this.addForm.characterizationUrl = "";
      this.checkList = ["ADMET", "KINOME"];
    },
    //提交表单 发送请求
    addMc() {
      //可以设置如果添加了两个文件才允许提交 不过先写成可以直接提交的样子
      this.$refs.addMcRef.validate(async valid => {
        this.addForm.type = 2;
        // valid为False 请求失败
        // async 和 await 是等待执行操作，数据库操作是异步的
        console.log(this.addForm);
        if (!valid) return;
        // valid为True 此时可以发起添加用户的网络请求
        //第一个参数是路径 第二个参数提交的data
        const { data: res } = await this.$axios.put("save", this.addForm);
        console.log(res);
        if (res.code !== 200) {
          return this.$message.error("表单提交失败！");
        }
        this.$message.success("表单提交成功！");
        // 隐藏添加用户的对话框
        this.addFormVisible = false;
        // 重新获取用户的列表
        await this.getMcList();
      });
    },
    beforePicUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传文件只能是 JPG/PNG 格式!");
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG || isPNG;
    },
    beforeRarUpload(file) {
      console.log(file);
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      const isRar = fileType === ".rar";
      const isZip = fileType === ".zip";
      const is7z = fileType === ".7z";
      //rar zip 7z
      console.log(fileType);
      console.log(isRar);
      console.log(isZip);
      console.log(is7z);
      if (!isRar && !isZip && !is7z) {
        this.$message.error("上传文件只能是 rar/zip/7z 格式!");
      }
      console.log(isRar && isZip && is7z);
      return isRar || isZip || is7z;
    },
    handleCsRemove(file, fileList) {
      //删除之后 清空url

      this.editForm.structureUrl = "";
      this.addForm.structureUrl = "";
      // this.$message("文件已删除")
    },
    handleCrRemove(file, fileList) {
      //删除之后 清空url
      this.editForm.characterizationUrl = "";
      this.addForm.characterizationUrl = "";
    },
    handlePreview(file) {
      console.log(file);
    },
    csHandleSuccess(res, file) {
      //提交成功后 add和edit都暂时为这个数据
      console.log(file);
      this.editForm.structureUrl = res.msg;
      this.addForm.structureUrl = res.msg;
      this.$message.success("化合物结构提交成功！");
    },
    csHandleError() {
      this.$message.error("化合物结构提交失败！");
    },
    crHandleSuccess(res, file) {
      console.log(file);
      this.editForm.characterizationUrl = res.msg;
      this.addForm.characterizationUrl = res.msg;
      this.$message.success("表征数据提交成功！");
    },
    crHandleError() {
      console.log("22");
      this.$message.error("表征数据提交失败！");
    },
    //时间戳转化为时间
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },
    uploadRar(fileName) {
      console.log(fileName);
      if (!fileName) {
        this.$message.error("文件不存在!");
        return;
      }
      // const urlFirst = fileName.substring(0, name.lastIndexOf("."))
      //http://121.36.58.180:8081/file/
      const url = this.now_url.now_url+"server_static/" + fileName;
      //下载

      window.open(url);
    },
    async removeMcBySid(sid) {
      // 弹框询问用户是否删除数据
      console.log(sid);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          // 如果取消 会抛出一个错误error 这里用catch捕获他 然后返回error
          // 可以简写成.catch(err => err)
        }
      ).catch(error => {
        return error;
      });
      // 如果化合物确认删除，返回值为字符串 confirm
      // 如果化合物取消删除，返回值为字符串 cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("以取消删除");
      }
      // console.log('已删除化合物')

      const { data: res } = await this.$axios.delete("/delete?sid=" + sid);
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("删除化合物失败！");
      }
      this.$message.success("删除化合物成功!");
      await this.getMcList();
    },
    // 展示编辑化合物的对话框
    async showEditDialog(sid) {
      //通过sid找到mcList的相关信息
      for (let i = 0; i < this.mcList.length; i++) {
        if (sid === this.mcList[i].sid) {
          // this.editForm = this.mcList[i]
          this.editForm = JSON.parse(JSON.stringify(this.mcList[i]));
        }
      }
      if (this.editForm.sid == null) {
        return this.$message.error("未找到该化合物信息！");
      }
      this.editMcVisible = true;
    },
    editFormClosed() {
      this.$refs.editMcRef.resetFields();
      this.$refs.cs.clearFiles();
      this.$refs.cr.clearFiles();
      this.addForm.structureUrl = "";
      this.addForm.characterizationUrl = "";
      this.MCcheckList = ['ADMET','KINOME']
    },
    // 修改化合物信息并提交
    editMc() {
      this.$refs.editMcRef.validate(async valid => {
        //source 0自己  1分享 2组 对应接口
        var source = this.editForm.source;
        this.editForm.type = 2;
        // console.log("提交的表单")
        // console.log(this.editForm)
        if (!valid) return;
        // 发起修改化合物信息的请求
        if (source === 0) {
          const { data: res } = await this.$axios.put("/update", this.editForm);
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else if (source === 1) {
          const { data: res } = await this.$axios.put(
            "/updateShare",
            this.editForm
          );
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else if (source === 2) {
          const { data: res } = await this.$axios.put(
            "/updateGroup",
            this.editForm
          );
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else {
          return this.$message.error("数据来源错误！");
        }
        // 关闭对话框
        this.editMcVisible = false;
        // 刷新数据列表
        await this.getMcList();
        // 提示修改成功
        this.$message.success("更新化合物结构成功");
      });
    },
    async downloadCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      console.log("最小值和最大值为");
      console.log(this.selectMin);
      console.log(this.selectMax);
      console.log("选择数组为");
      console.log(this.multipleSelectionSid);
      //返回msg和code
      const { data: res } = await this.$axios.post("generatePageType", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.msg;
      console.log(this.excelUrl);
      if (!this.excelUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      const url = this.now_url.now_url+"return_file/" + this.excelUrl;
      //下载

      window.open(url);
    },
    async downloadCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      console.log("最小值和最大值为");
      console.log(this.selectMin);
      console.log(this.selectMax);
      console.log("选择数组为");
      console.log(this.multipleSelectionSid);
      //返回msg和code
      const { data: res } = await this.$axios.post("generatePageTypeFile", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      let url1 = this.now_url.now_url+"return_file/" + this.excelUrl;
      let url2 = this.now_url.now_url+"return_file/" + this.rarUrl;
      let fileList = [url1, url2];
      console.log(fileList[0]);
      console.log(fileList[1]);
      for (let i = 0; i < fileList.length; i++) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; //防止影响页面
        iframe.style.height = 0; //防止影响页面
        iframe.src = fileList[i];
        document.body.appendChild(iframe); //这一行必须，iframe挂在到dom树上才会发请求//5分钟之后删除
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    },
    async downloadAllCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      console.log(this.queryInfo.type);
      const { data: res } = await this.$axios.get("/generateAllType", {
        params: {
          type: this.queryInfo.type
        }
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //也是返回一个
      this.excelUrl = res.msg;
      // this.rarUrl=res.pic
      console.log(this.excelUrl);

      if (!this.excelUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      console.log(this.excelUrl);
      const url = this.now_url.now_url+"return_file/" + this.excelUrl;
      //下载

      window.open(url);
    },
    // 打包全部下载
    async downloadAllCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //返回4个参数 msg为获取成功 code excel pic
      console.log("------");
      const { data: res } = await this.$axios.get("generateAllTypeFile", {
        params: {
          type: this.queryInfo.type
        }
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      let url1 = this.now_url.now_url+"return_file/" + this.excelUrl;
      let url2 = this.now_url.now_url+"return_file/" + this.rarUrl;
      let fileList = [url1, url2];
      console.log(fileList[0]);
      console.log(fileList[1]);
      for (let i = 0; i < fileList.length; i++) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; //防止影响页面
        iframe.style.height = 0; //防止影响页面
        iframe.src = fileList[i];
        document.body.appendChild(iframe); //这一行必须，iframe挂在到dom树上才会发请求//5分钟之后删除
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelectionSid = [];
      if (this.multipleSelection) {
        this.multipleSelection.forEach(row => {
          this.multipleSelectionSid.push(row.sid);
        });
      }
      console.log(this.multipleSelectionSid);
    },
    getRowMCKeys(row) {
      return row.sid;
    }
  }
};
</script>
<!--删除了style的scope 减少权重-->
<style>
.mcTable {
  margin-top: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  /*width: 90px;*/
  color: #99a9bf;
}

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
}

.expand-msg {
  border-radius: 1px !important;
  border: 1px solid rgba(239, 239, 239, 0.36);
  /*height: 50px;*/
  line-height: 50px;
  /*border: 1px solid #000 !important;*/
  /*border-right: none;*/
}

.expand-msg-left {
  border-left: 2px solid rgba(239, 239, 239, 0.36);
}

.table-item {
  margin-bottom: 0px !important;
  line-height: 50px;
  padding-left: 10px;
}

.table-item-span {
  line-height: 50px;
  width: 140px;
  /*word-break:keep-all;*/
  /*white-space:nowrap;*/
}

.add-button {
  margin-top: 5px;
}

.table-image {
  width: auto;
  height: auto;
  /*max-width: 50%;*/
  /*max-height: 50%;*/
  display: block;
}

.image-slot {
  /*height: 35px;*/
}

.add {
  width: 140px;
  height: 36px;
  background: #4087fc;
  border-radius: 6px;
}

/*.el-form-item .table-item label{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item .demo-table-expand{*/
/*  margin-bottom: 0px !important;*/
/*}*/

/*.el-form-item__content{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item__label{*/
/*  padding-left: 10px;*/
/*}*/
.input {
  width: 400px;
  height: 36px;
  background: #fafafa;
  /* border: 1px solid #E6E6E6; */
  border-radius: 18px;
}

.row-flex {
  display: flex;
  justify-content: flex-end;
}

.btn-all {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cell {
  text-align: center;
}

.sx {
  width: 1.5px;
  height: 18px;
  /* font-size: 14px;
  font-weight: 400; */
  background: #ccccccff;
}

.addimg {
  width: 22px;
  height: 16px;
  margin-left: 0px;
  margin-top: 0;
  float: left;
}

a {
  text-decoration: none;
  color: #2bbb7f;
}

.MCsearch {
  margin-top: 25px;
  background: rgba(247, 247, 247, 1);
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
}
</style>
